<template>
  <div :ref="id" class="vue-chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        data: {
            type: Array,
            required: false,
            default: () => [
                ['周一', 40, 33],
                ['周二', 90, 199],
                ['周三', 80, 120],
                ['周四', 10, 191],
                ['周五', 90, 120],
                ['周六', 88, 90],
                ['周日', 40, 80],
            ],
        },
        color: {
            type: Array,
            required: false,
            default: () => ['#4e72b8', '#181d4b', '#f47920', '#aa2116', '#fcaf17'],
        },

    },
    data() {
        return {
            id: new Date().getTime().toString(),
        };
    },
    mounted() {
        this.myChart = echarts.init(this.$refs[this.id]);
        this.init();
        const resizeObserver = new ResizeObserver(entries => {
            if (this.myChart) {
                this.myChart.resize();
            }
        });
        resizeObserver.observe(this.$refs[this.id]);
    },
    methods: {
        init() {
            const series = [];
            const xData = this.data.map(vo => vo[0]);
            const seriesLen = this.data[0].length - 1;
            let max = Number.MIN_SAFE_INTEGER;
            for (let i = 0; i < this.data.length; i += 1) {
                const data = this.data[0];
                for (let j = 1; j < data.length; j += 1) {
                    if (max < data[j]) {
                        max = data[j];
                    }
                }
            }
            for (let i = 1; i < seriesLen; i++) {
                series.push({
                    data: this.data.map((vo, idx) => [vo[1], vo[i + 1]]),
                    type: 'scatter',
                    coordinateSystem: 'polar',
                    color: this.color[i % this.color.length],
                    symbolSize: function (data) {
                        return data[1] / max * 10;
                    }
                });
            }
            const targetOption = {
                grid: {
                    left: '0px',
                    bottom: '0px',
                    right: '0px',
                    top: '24px',
                    containLabel: true,
                },
                polar: {},
                angleAxis: {
                    type: 'category',
                    data: xData,
                    boundaryGap: false,
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    }
                },
                radiusAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        rotate: 45
                    }
                },
                series,
            };
            console.log('target option==>', targetOption);
            this.myChart.setOption(targetOption);
        },
    }
}
</script>

<style lang="less" scoped>
.vue-chart-box {
    width: 100%;
    height: 100%;
}
</style>